<template>
  <div class="bottom_wrapper">
    <div class="bottom_left">
        <div class="left_name">{{name}}</div>
        <div>{{phone}}</div>
        <div class="xian"></div>
    </div>
    <div class="bottom_center" :class="{action:showCertify=='1'}" @click="showCertifyC()">
        <span class="iconfont icon-favourited"></span>
        <div>收藏</div>
    </div>
    <div class="bottom_right"><a :href="'tel:' + phone">一键拨打</a></div>
  </div>
</template>

<script>
export default {
  name: 'CompanyBottom',
  props: {
    name: String,
    showCertify: Number,
    id: Number
  },
  data () {
    return {
      flag: 1,
      phone: sessionStorage.getItem('phone')
    }
  },
  beforeMount () {
    if (sessionStorage.getItem('phone') === '' || sessionStorage.getItem('phone') === null) {
      this.phone = '400-600-8728'
    } else {
      this.phone = sessionStorage.getItem('phone')
    }
  },
  methods: {
    showCertifyC () {
      // console.log(this.showCertify)
      if (sessionStorage.getItem('token')) {
        if (this.showCertify === 1) {
          this.flag = 2
        }
        this.$axios.post(process.env.API_HOST + '/api/vip/create_collection', {
          store_id: this.id,
          type: 1,
          flag: this.flag
        }).then(this.showCertifyCSucc)
          .catch(error => console.log(error))
      } else {
        this.$router.push('/login')
      }
    },
    showCertifyCSucc (res) {
      if (res.data.code === 1) {
        if (this.flag === 1) {
          this.$toast('收藏成功')
        } else {
          this.$toast('取消收藏成功')
        }
        // setTimeout(function () {
        //   location.reload()
        // }, 500)
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.bottom_wrapper
    width 100%
    height 1rem /* 50/50 */
    line-height 1rem /* 50/50 */
    position fixed
    bottom 0rem /* 0/50 */
    left 0rem /* 0/50 */
    background-color #ffffff
    box-shadow 0px 0px 5px 0px rgba(78, 78, 78, 0.1)
    div
        float left
        height 100%
        line-height 1rem /* 50/50 */
        font-size .22rem /* 11/50 */
    .bottom_left
        width 45%
        padding-top .18rem /* 9/50 */
        position relative
        div
            width 100%
            height .18rem /* 9/50 */
            line-height .18rem /* 20/50 */
            text-align center
        .left_name
            font-weight bold
            line-height .4rem
            height .5rem
            font-size .42rem /* 21/50 */
        .xian
            position absolute
            top .3rem /* 15/50 */
            right 0px
            width 1px
            height .4rem /* 20/50 */
            background-color rgba(0,0,0,.1)
    .bottom_center
        width 21%
        text-align center
        span
            display inherit
            width 100%
            height .42rem /* 21/50 */
            line-height .5rem
            color #D1D1D1
            font-size .42rem /* 21/50 */
            margin-top .16rem /* 8/50 */
        div
            width 100%
            height .2rem /* 10/50 */
            line-height .2rem /* 10/50 */
            margin-top .1rem /* 1/50 */
            font-size .2rem /* 10/50 */
    .bottom_center.action
        span
            background linear-gradient(90deg, #FFCC00, #FFC000)
            -webkit-background-clip text
            -webkit-text-fill-color transparent
            text-shadow 1px 1px 5px rgba(227, 179, 13, 0.42)
    .bottom_right
        width 34%
        background linear-gradient(90deg, #F14510, #EE340F)
        border-radius 5px 0px 0px 5px
        color #ffffff
        font-size .36rem /* 18/50 */
        text-align center
        font-weight bold
</style>
